<!doctype html>
<html lang="zh-Hans">
    <head>
        <meta charset="utf-8">
        <meta name="application-name" content="移动销售管理系统">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>移动销售管理系统</title>
        <link rel="stylesheet" href="./angular/angular-material.min.css">
        <link rel="stylesheet" href="./index.css">
        <script src="./require.js" data-main="rsms" async></script>

        <link rel="icon" type="image/png" href="./favicon/16x16.png" sizes="16x16">
        <link rel="icon" type="image/png" href="./favicon/32x32.png" sizes="32x32">
        <link rel="icon" type="image/png" href="./favicon/96x96.png" sizes="96x96">
        <link rel="icon" type="image/png" href="./favicon/194x194.png" sizes="194x194">
        <style>[ng-cloak] { display: none; }</style>
    </head>

    <script type="text/ng-template" id="prompt-dialog">
        <md-dialog>
            <form name="dialog_form" novalidate>
                <md-dialog-content>
                    <md-content layout="column" layout-margin flex>
                        <div ng-if="dialog.text">
                            <p class="spaced">{{dialog.text}}</p>
                            <md-divider></md-divider>
                        </div>
                        <div>
                            <md-input-container ng-if="dialog.label != null" class="md-icon-float md-block">
                                <label>{{dialog.label}}</label>
                                <md-icon md-svg-icon="{{dialog.icon}}"></md-icon>
                                <input type="{{dialog.type}}" name="input" ng-model="dialog.value" required md-autofocus>
                                <div ng-messages="dialog_form.input.$error">
                                    <div ng-message="required">必填</div>
                                </div>
                            </md-input-container>
                            <md-input-container ng-if="dialog.selections != null" class="md-icon-float md-block">
                                <md-icon md-svg-icon="{{dialog.icon}}"></md-icon>
                                <md-select ng-model="dialog.value" name="input" md-autofocus>
                                    <md-option ng-repeat="item in dialog.selections" value="{{item}}">
                                        {{item}}
                                    </md-option>
                                </md-select>
                            </md-input-container>
                        </div>
                    </md-content>
                </md-dialog-content>
                <md-dialog-actions>
                    <md-button ng-click="dialog.close()">取消</md-button>
                    <md-button type="submit" class="{{dialog.action_style}}" ng-click="dialog_form.$valid && dialog.action(dialog_form.input)">{{dialog.action_text}}</md-button>
                </md-dialog-content>
            </form>
        </md-dialog>
    </script>

    <script type="text/ng-template" id="form-dialog">
        <md-dialog>
            <form name="dialog_form" novalidate>
                <md-dialog-content>
                    <md-content layout="column" layout-margin flex>
                        <div ng-repeat="input in dialog.inputs" class="compact-input">
                            <md-input-container ng-if="!input.selections" class="md-icon-float md-block">
                                <label>{{input.label}}</label>
                                <md-icon md-svg-icon="{{input.icon}}"></md-icon>
                                <input type="{{input.type}}" name="{{input.id}}" ng-model="dialog.values[input.id]" min="{{input.min}}" max="{{input.max}}" step="{{input.step}}" required>
                                <div ng-messages="dialog_form.{{input.id}}.$error">
                                    <div ng-message="required">
                                        {{dialog_form[input.id].$error.required ? '必填' : ''}}
                                        {{dialog_form[input.id].$error.min ? '数值太小' : ''}}
                                        {{dialog_form[input.id].$error.max ? '数值太大' : ''}}
                                        {{dialog_form[input.id].$error.number ? '必须是数字' : ''}}
                                    </div>
                                </div>
                            </md-input-container>
                            <md-input-container ng-if="input.selections" class="md-icon-float md-block">
                                <label>{{input.label}}</label>
                                <md-icon md-svg-icon="{{input.icon}}"></md-icon>
                                <md-select ng-model="dialog.values[input.id]" name="{{input.id}}" required>
                                    <md-option ng-repeat="item in input.selections" value="{{item}}">
                                        {{item}}
                                    </md-option>
                                </md-select>
                                <div ng-messages="dialog_form.{{input.id}}.$error">
                                    <div ng-message="required">必填</div>
                                </div>
                            </md-input-container>
                        </div>
                    </md-content>
                </md-dialog-content>
                <md-dialog-actions>
                    <md-button ng-click="dialog.close()">取消</md-button>
                    <md-button type="submit" class="md-primary" ng-click="dialog_form.$valid && dialog.action()">{{dialog.action_text}}</md-button>
                </md-dialog-content>
            </form>
        </md-dialog>
    </script>

    <body layout="column" ng-controller="app-controller as app">

        <!-- progress spinner overlay -->
        <div class="rsms-progress-ocd-death text" id="preloading">
            <div class="rsms-progress-ocd-death-rotation">
                <div class="rsms-progress-ocd-death-spinner"></div>
            </div>
        </div>

        <!-- main area -->
        <section layout="row" flex ng-cloak>

            <!-- progress spinner overlay -->
            <div class="rsms-progress-ocd-death"
                 ng-class="{ text: app.busy !== '' }"
                 ng-if="app.busy != null">
                <div class="rsms-progress-ocd-death-rotation">
                    <div class="rsms-progress-ocd-death-spinner"></div>
                </div>
                <p>{{app.busy}}</p>
            </div>

            <!-- side pane -->
            <md-sidenav class="md-sidenav-left md-whiteframe-z2"
                        md-component-id="left"
                        layout="column"
                        md-is-locked-open="app.menu_lock_open()"
                        flex-gt-sm="25">
                <!-- profile info -->
                <md-toolbar class="md-tall">
                    <div layout="column" layout-align="center center" flex>
                        <div layout="row" layout-wrap layout-padding layout-align="center end">
                            <span class="md-subhead">{{app.role}}</span>
                            <span class="md-headline">{{app.name}}</span>
                        </div>
                    </div>
                </md-toolbar>

                <!-- page switcher -->
                <md-content>
                    <md-list>
                        <md-list-item ng-repeat="page in app.pages"
                                      ng-if="app.accessible(page)"
                                      ng-click="app.page_select(page)"
                                      ng-class="{ selected: app.page_is(page) }">
                            <md-icon md-svg-icon="{{page.icon}}"></md-icon>
                            <p>{{page.name}}</p>
                        </md-list-item>
                    </md-list>
                </md-content>
            </md-sidenav>

            <!-- main area -->
            <md-content layout="column" flex>
                <md-toolbar>
                    <div class="md-toolbar-tools">
                        <md-button class="md-icon-button"
                                   ng-click="app.open_menu()"
                                   ng-hide="app.menu_lock_open()">
                            <md-icon md-svg-icon="menu"></md-icon>
                        </md-button>
                        <h2>{{app.page.name}}</h2>
                        <span flex></span>

                        <!-- list back icon -->
                        <md-button ng-click="app.page_back()"
                                   ng-show="app.view_is('list') && app.page.back != null"
                                   ng-disabled="app.loading"
                                   ng-class="{ 'md-icon-button': !app.toolbar_show_icons() }">
                            <md-icon md-svg-icon="back"></md-icon>
                            <span ng-show="app.toolbar_show_icons()">返回</span>
                        </md-button>

                        <!-- list add icon -->
                        <md-button ng-click="app.list_add($event, app.page)"
                                   ng-show="app.view_is('list') && app.page.add != null"
                                   ng-disabled="app.loading"
                                   ng-class="{ 'md-icon-button': !app.toolbar_show_icons() }">
                            <md-icon md-svg-icon="plus"></md-icon>
                            <span ng-show="app.toolbar_show_icons()">添加{{app.page.name}}</span>
                        </md-button>

                        <!-- list refresh icon -->
                        <md-button ng-click="app.list_refresh()"
                                   ng-show="app.view_is('list')"
                                   ng-disabled="app.loading"
                                   ng-class="{ 'md-icon-button': !app.toolbar_show_icons() }">
                            <md-icon md-svg-icon="refresh"></md-icon>
                            <span ng-show="app.toolbar_show_icons()">刷新</span>
                        </md-button>

                        <!-- toolbar icons -->
                        <span ng-show="app.toolbar_show_icons()">
                            <md-button ng-repeat="icon in app.toolbar_icons"
                                       class="{{icon.style}}"
                                       ng-click="app.toolbar_icon_click(icon, $event)"
                                       ng-if="!icon.divider"
                                       ng-disabled="app.page_is(icon)">
                                <md-icon md-svg-icon="{{icon.icon}}"></md-icon>
                                {{icon.name}}
                            </md-button>
                        </span>

                        <!-- collapsed toolbar icons -->
                        <md-menu md-position-mode="target-right target" ng-hide="app.toolbar_show_icons()">
                            <md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
                                <md-icon md-svg-icon="more-vert"></md-icon>
                            </md-button>
                            <md-menu-content width="3">
                                <div ng-repeat="icon in app.toolbar_icons">
                                    <md-menu-item ng-if="!icon.divider">
                                        <md-button class="{{icon.style_collapse}}"
                                                   ng-disabled="app.page_is(icon)"
                                                   ng-click="app.toolbar_icon_click(icon, $event)">
                                            <md-icon md-svg-icon="{{icon.icon}}"></md-icon>
                                            {{icon.name}}
                                        </md-button>
                                    </md-menu-item>
                                    <md-divider ng-if="icon.divider"></md-divider>
                                </div>
                            </md-menu-content>
                        </md-menu>
                    </div>
                </md-toolbar>

                <!-- home view -->
                <md-content layout="column" layout-align="center center" layout-padding flex
                            ng-show="app.view_is('home')">
                    <img src="./favicon/194x194.png" alt="rsms-logo">
                    <div>移动销售管理系统 <code>v0.1.8</code></div>
                    <div class="unimportant">API 地址： <code>{{app.api_base}}</code></div>
                    <div class="unimportant">登录用户： <code>{{app.username}}</code></div>
                </md-content>

                <!-- list view -->
                <md-content layout="column" layout-align="center center" layout-padding flex
                            ng-show="app.view_is('list')">
                    <md-virtual-repeat-container flex layout-fill>
                        <md-list>
                            <md-menu md-position-mode="target-right target"
                                     md-virtual-repeat="item in app.list_items()" md-on-demand
                                     md-item-size="51"
                                     style="height: 50px">
                                <md-list-item style="min-height: 50px"
                                              ng-click="$mdOpenMenu($event)"
                                              ng-disabled="item == null">
                                        <div ng-if="item != null" flex layout="row" class="baseline-align {{app.page.list_text.style(item)}}">
                                        <span class="md-title no-wrap">{{app.page.list_text.major(item)}}</span>
                                        <span class="unimportant spaced thin-height">{{app.page.list_text.desc(item)}}</span>
                                        <span flex></span>
                                        <span class="md-subhead spaced thin-height">{{app.page.list_text.minor(item)}}</span>
                                    </div>
                                    <div ng-if="item == null" layout="row" layout-align="center center" flex>
                                        <md-progress-circular md-mode="indeterminate"></md-progress-circular>
                                    </div>
                                </md-list-item>
                                <md-menu-content width="4">
                                    <md-menu-item ng-if="item != null && app.page.list_text.menu(item) != null" class="reset-height">
                                        <p class="spaced">{{app.page.list_text.menu(item)}}</p>
                                    </md-menu-item>
                                    <md-menu-divider></md-menu-divider>
                                    <md-menu-item ng-repeat="menu in app.page.menu">
                                        <md-button ng-click="menu.click(item, menu, $event)" class="{{menu.style}}" ng-disabled="{{menu.disabled}}">
                                            <md-icon md-svg-icon="{{menu.icon}}"></md-icon>
                                            {{menu.name}}
                                        </md-button>
                                    </md-menu-item>
                                </md-menu-content>
                            </md-menu>
                        </md-list>
                    </md-virtual-repeat-container>
                </md-content>

            </md-content>
        </section>
    </body>
</html>

